<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style type="text/css">
	*{
		box-sizing: border-box;
		-moz-box-sizing: border-box; /* Firefox */
		-webkit-box-sizing: border-box; /* Safari */
	}
	html {
		font-size: 20px;
	}
	html,body {
		height: 100%;
	}
	body {
		margin: 0;
		padding: 0;
		overflow: hidden;
		background-color: #fcfcfc;
	}
	.app {
		position: relative;
		margin: 0 auto;
		width: 51.2rem;
		height: 38.4rem;
		background-color: black;
		-moz-user-select:none;/*火狐*/
		-webkit-user-select:none;/*webkit浏览器*/
		-ms-user-select:none;/*IE10*/
		-khtml-user-select:none;/*早期浏览器*/
		user-select:none;
	}
	.app>canvas,.app>img,.app>div.btn,.app>input {
		display: block;
		position: absolute;
	}
	.app>div.btn.start {
		width: 8.7890625%;
		height: 9.114583%;
		right: 7%;
		bottom: 6%;
		z-index: 10;
		background-image: url('./images/start.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.btn.start:hover {
		cursor: pointer;
		background-image: url('./images/start_hover.png');
	}
	.app>div.btn.taskA {
		width: 29.296875%;
		height: 41.015625%;
		left: 35.3515625%;
		bottom: 30%;
		z-index: 10;
		background-image: url('./images/taskA.png');
		background-size: 100% 100%;
		cursor: pointer;
		display: none;
	}
	.app>div.btn.taskA.active {
		background-image: url('./images/taskA_hover.png');
	}
	.app>div.btn.select_start {
		width: 14.6484375%;
		height: 10.4167%;
		right: 6%;
		bottom: 6%;
		z-index: 10;
		background-image: url('./images/select_start.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.btn.select_start:hover {
		cursor: pointer;
		background-image: url('./images/select_start_hover.png');
	}
	.app>div.btn.arrest {
		width: 22.4609375%;
		height: 13.02083%;
		right: 0;
		top: 50%;
		z-index: 11;
		background-image: url('./images/arrest.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.btn.arrest:hover {
		cursor: pointer;
		background-image: url('./images/arrest_hover.png');
	}
	.app>div.btn.replay {
		width: 22.4609375%;
		height: 13.02083%;
		left: 15%;
		top: 55%;
		z-index: 11;
		background-image: url('./images/replay.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.btn.replay:hover {
		cursor: pointer;
		background-image: url('./images/replay_hover.png');
	}
	.app>div.btn.return {
		width: 22.4609375%;
		height: 13.02083%;
		right: 15%;
		top: 55%;
		z-index: 11;
		background-image: url('./images/return.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.btn.return:hover {
		cursor: pointer;
		background-image: url('./images/return_hover.png');
	}
	.app>canvas.full {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
	}
	.app>canvas.start_layer,.app>canvas.select_start_layer {
		z-index: 0;
		display: none;
	}
	.app>canvas.huo_layer {
		z-index: 1;
		display: none;
	}
	.app>canvas.base_layer {
		z-index: 1;
		display: none;
	}
	.app>canvas.back_layer {
		z-index: 2;
		display: none;
	}
	.app>canvas.thief_layer,.app>canvas.chara_layer {
		z-index: 3;
		display: none;
	}
	.app>canvas.game_layer,.app>canvas.tips_layer {
		z-index: 4;
		display: none;
	}
	.app>canvas.confirm_layer {
		z-index: 8;
		display: none;
	}
	.app>canvas.qian_layer {
		z-index: 9;
		display: none;
	}
	.app>div.btn.confirm {
		width: 12%;
		height: 9%;
		right: 44%;
		bottom: 42%;
		z-index: 9;
		cursor: pointer;
		background-color: red;
		opacity: 0.5;
		display: none;
	}
	.app>div.btn.confirm {
		opacity: 0;
	}
	.app>img.speed {
		width: 10%;
		height: auto;
		right: 7%;
		top: 23.5%;
		z-index: 11;
		cursor: pointer;
		display: none;
		transform: scale(1.1,1.1);
		-webkit-transform: scale(1.1,1.1);
		-moz-transform: scale(1.1,1.1);
		-o-transform: scale(1.1,1.1);
		-ms-transform: scale(1.1,1.1);
	}
	.app>img.speed:active {
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}
	/*.app>img.speed:active {
		transform: scale(1,1);
		-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		-ms-transform: scale(1,1);
	}*/
	.app>img.result {
		width: 6.8%;
		height: 6%;
		right: 35.7%;
		top: 29%;
		z-index: 11;
		cursor: pointer;
		display: none;
		opacity: 0;
	}
	.app>img.success,.app>img.error {
		width: 100%;
		height: auto;
		right: 0;
		top: 30%;
		z-index: 11;
		display: none;
	}
	.app>div.keyboard{
		position: absolute;
		width: 14.16015625%;
		height: 28.2552083%;
		right: 32%;
		top: 35%;
		z-index: 12;
		background-image: url('./images/keyboard.png');
		background-size: 100% 100%;
		display: none;
	}
	.app>div.keyboardKey {
		display: none;
	}
	.app>div.keyboardKey>div {
		position: absolute;
		width: 3.515625%;
		height: 4.8177083%;
		right: 32%;
		top: 35%;
		z-index: 12;
		cursor: pointer;
		background-color: red;
		opacity: 0.5;
	}
	.app>div.keyboardKey>div{
		opacity: 0;
	}
	.progress{
		position: fixed;
		width: 0;
		height: 0.15rem;
		background-color: #3399ff;
		opacity: 0.5;
		z-index: 10000;
		transition: width .3s ease;
		-webkit-transition: width .3s ease;
		-moz-transition: width .3s ease;
		-o-transition: width .3s ease;
		-ms-transition: width .3s ease;
	}
	</style>
</head>
<body>
	<div id="progress" class="progress"></div>
	<!-- 1024*768 => w:h = 4:3 -->
	<div id="app" class="app">
		<!-- 启动游戏层 -->
		<canvas id="start_layer" class="start_layer full" width="1024" height="768"></canvas>
		<canvas id="huo_layer" class="huo_layer full" width="1024" height="768"></canvas>
		<!-- start按钮 -->
		<div id="startBtn" class="btn start"></div>

		<!-- 选择任务层 -->
		<canvas id="select_start_layer" class="select_start_layer full" width="1024" height="768"></canvas>
		<!-- select_start按钮 -->
		<div id="select_startBtn" class="btn select_start"></div>
		<!-- taskA按钮 -->
		<div id="taskABtn" class="btn taskA"></div>
		
		<!-- 游戏层 -->
		<canvas id="base_layer" class="base_layer full" width="1024" height="768"></canvas>
		<canvas id="back_layer" class="back_layer full" width="1024" height="768"></canvas>
		<canvas id="thief_layer" class="thief_layer full" width="1024" height="768"></canvas>
		<canvas id="chara_layer" class="chara_layer full" width="1024" height="768"></canvas>
		<canvas id="tips_layer" class="tips_layer full" width="1024" height="768"></canvas>
		<canvas id="game_layer" class="game_layer full" width="1024" height="768"></canvas>
		<canvas id="confirm_layer" class="confirm_layer full" width="1024" height="768"></canvas>
		<canvas id="qian_layer" class="qian_layer full" width="1024" height="768"></canvas>
		<!-- confirm按钮 -->
		<div id="confirmBtn" class="btn confirm"></div>
		<!-- 加速按钮 -->
		<img id="speedBtn" class="speed" src="./images/speed_small.png">
		<!-- 实施抓捕 -->
		<div id="arrestBtn" class="btn arrest"></div>
		<!-- 结果输入 -->
		<img id="resultBtn" class="result" src="./images/sub.png">
		<!-- <input id="resultInput" class="result" type="text"> -->
		<!-- 小键盘 -->
		<div id="keyboard" class="keyboard"></div>
		<div id="keyboardKey" class="keyboardKey">
			<div style="right: 41.6%;top: 40.6%;" flag="7"><!-- 7 --></div>
			<div style="right: 37.4%;top: 40.6%;" flag="8"><!-- 8 --></div>
			<div style="right: 33.2%;top: 40.6%;" flag="9"><!-- 9 --></div>
			<div style="right: 41.6%;top: 46.2%;" flag="4"><!-- 4 --></div>
			<div style="right: 37.4%;top: 46.2%;" flag="5"><!-- 5 --></div>
			<div style="right: 33.2%;top: 46.2%;" flag="6"><!-- 6 --></div>
			<div style="right: 41.6%;top: 51.8%;" flag="1"><!-- 1 --></div>
			<div style="right: 37.4%;top: 51.8%;" flag="2"><!-- 2 --></div>
			<div style="right: 33.2%;top: 51.8%;" flag="3"><!-- 3 --></div>
			<div style="right: 41.6%;top: 57.4%;" flag="del"><!-- del --></div>
			<div style="right: 37.4%;top: 57.4%;" flag="0"><!-- 0 --></div>
			<div style="right: 33.2%;top: 57.4%;" flag="enter"><!-- enter --></div>
		</div>
		<!-- 成功 -->
		<img id="success" class="success" src="./images/success.png">
		<!-- 失败 -->
		<img id="error" class="error" src="./images/error.png">
		<!-- 重玩 -->
		<div id="replayBtn" class="btn replay"></div>
		<!-- 返回 -->
		<div id="returnBtn" class="btn return"></div>

		<!-- css preload -->
		<div style="display: none;">
			<img src="./images/start_hover.png">
			<img src="./images/taskA_hover.png">
			<img src="./images/select_start_hover.png">
			<img src="./images/arrest_hover.png">
			<img src="./images/replay_hover.png">
			<img src="./images/return_hover.png">
		</div>
	</div>
	<script type="text/javascript" src="./scripts/G.js"></script>
	<script type="text/javascript" src="./scripts/main.js"></script>
</body>
</html>